<template>
    <div v-show="setView === 'list'">
        <!-- 搜索 -->
        <ContentWrap>
            <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                <el-form-item label="姓名" prop="userName">
                    <el-input v-model="queryParams.userName" placeholder="请输入姓名" clearable @keyup.enter="handleQuery"
                        class="!w-240px" />
                </el-form-item>
                <el-form-item label="负责区域" prop="regionAddress">
                    <el-select v-model="queryParams.regionAddress" placeholder="负责区域" clearable class="!w-240px">
                        <el-option v-for="dict in provinceStore.provinceDate" :key="dict.code"
                            :label="dict.name" :value="dict.name" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                    <el-button type="primary"  v-hasPermi="['beidaUser:saveOrUpdate']" @click="openForm('create')"> 新增
                    </el-button>
                </el-form-item>
            </el-form>
        <!-- 列表 -->
            <el-table v-loading="loading" :data="list" row-key="id"  header-cell-class-name="custom-header" stripe>
                <el-table-column align="center" :show-overflow-tooltip="true" label="姓名" prop="userName" width="250">
                </el-table-column>
                <el-table-column align="center" :show-overflow-tooltip="true" label="手机号" prop="phone" />
                <el-table-column align="center" :show-overflow-tooltip="true" label="工作单位" prop="workUnit"/>
                <el-table-column align="center" :show-overflow-tooltip="true" label="负责区域" prop="regionAddress"
                    width="250" />
                <el-table-column align="center" label="启用" prop="isEnable" width="150">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isEnable" active-value="1" inactive-value="0" :disabled="!checkPermissions(['beidaUser:updateStatus'])"
                            @click="onChangeStateClick(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                    <template #default="scope">
                        <!-- <el-button v-hasPermi="['arriveNotice:messageTemplate:detail']" link type="primary"
                        @click="openForm('查看', scope.row.id)">
                        查看
                    </el-button> -->
                        <el-button link type="primary"  v-hasPermi="['beidaUser:saveOrUpdate']" @click="openForm('update', scope.row.id, scope.row)">
                            修改
                        </el-button>
                        <el-button link type="danger" v-hasPermi="['beidaUser:delete']"  @click="handleDelete(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
                @pagination="getList" />
        </ContentWrap>
    </div>
    <!-- 表单弹窗：添加/修改 -->
    <ContactsForm ref="contactsRef" @success="refresh" @setClose="setClose"  v-show="setView === 'addSetting'" />
</template>
<script lang="ts" setup>
import ContactsForm from './contactsForm.vue'
import * as contactApi from '@/api/infoArrive/contacts/index'
import { useProvinceStore } from '@/store/modules/province'
const provinceStore = useProvinceStore()
const change = () => provinceStore.fetchProvinceData();
defineOptions({ name: 'Contact' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { currentRoute, push } = useRouter() // 路由

const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive<any>({
    pageNo: 1,
    pageSize: 10,
    userName:'',
    regionAddress:''
})
const setView = ref('list')
const setViewFun=(type:string)=>{
  setView.value=type;
}
const setClose = ()=>{
  setView.value = 'list'
}
/** 查询列表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await contactApi.getContactsList(queryParams)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}

/** 添加/修改操作 */
const contactsRef = ref()
const openForm = (type: string, id?: number, row?: any) => {
    setViewFun('addSetting')
    contactsRef.value.open(type,id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
    try {
        // 删除的二次确认
        await message.delConfirm()
        // 发起删除
        await contactApi.deleteContacts([id])
        message.success(t('common.delSuccess'))
        // 刷新列表
        await getList()
    } catch { }
}

/** 修改状态 **/
const onChangeStateClick = async (row: any) => {
    try {
        // 修改状态的二次确认
        const text = row.isEnable === '1' ? '启用' : '停用'
        await message.confirm('确认要"' + text + '""' + row.userName + '"的数据吗?')
        await contactApi.enableContacts({ status: row.isEnable, id: row.id });
        message.success(text + '成功')
        await getList()
    } catch {
        row.isEnable =
            row.isEnable === '1' ? '0' : '1'
    }
}
const refresh = ()=>{
  setClose()
  getList()
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
const queryFormRef = ref()
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
/**表单保存返回后重新加载列表 */
watch(
  () => currentRoute.value,
  () => {
    getList()
  }
)
/** 初始化 **/
onMounted(() => {
    change()
    getList()
})


</script>

<style scoped>
/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}
</style>
